<template>
  <h2>{{ title }}</h2>
  <button @click="handlerAdd">add {{ count }}</button>
  <button @click="emitChange">emitChange</button>
  <input ref="el" type="text" v-model="count">
</template>
<script setup lang="ts">
import { ref, reactive, computed, inject, onMounted } from 'vue'
import { DemoKey } from './const.ts'
/** props 类型标注 */
// const props = defineProps({ // defineProps宏函数-运行时声明
//   title: { type: String, reuqire: true },
//   age: Number
// })

// const props = defineProps<{ // 泛型参数-小写类型-比之宏函数defineProps<大写>更直接===> 称之为“基于类型的申明”
//   title: string,
//   age?: number
// }>()

// 类型可以移入一个单独的接口中：等同于下面
// interface Props {
//   title: string,
//   age?: number
// }
// const props2 = defineProps<Props>()

// import type { Props } from './foo' // 第三方文件导入

// 解构默认值，为props赋予默认值
interface Props3 {
  title: string,
  age?: number
}
const props3 = withDefaults(defineProps<Props3>(), {
  title: 'message',
  age: 20
})
console.log('script setup: ', props3)

/** ref */
let count = ref<number>(10)
/** 事件处理函数 隐式any类型 */
function handlerAdd(event: Event) {
  count.value++
  console.log('double: ', doubleCount.value)
  console.log('event: ', (event.target as HTMLButtonElement).textContent)
}

/** reactive */
interface Book {
  title: string,
  year?: number 
}
const book: Book = reactive({
  title: '三国',
  year: 2000
})
console.log('reactive ts: ', book)

/** emits */
const emit = defineEmits<{
  change: [id: number],
  update: [id: number]
}>()
function emitChange () {
  emit('change', count.value)
}

/** computed */
const doubleCount = computed<number>(() => count.value * 2)


/** inject */
const injectVal = inject<string>(DemoKey, 'default value')
console.log('inject: ', injectVal)

/** 模版引用标注类型 */
const el = ref<HTMLInputElement | null>(null)
onMounted(() => {
  el.value?.focus()
})



</script>
